<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/user_detail.css">

</head>
<body>
<div class="nav">
    <img src="pic/blog-logo.png" alt="">
    <span class="blog-title">我的博客系统</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
    <a class="nav-span" href="#" onclick="logout()">注销</a>
</div>

<div class="container">
    <div class="left">
        <div class="card">
            <img id="userAvatar" src="" alt="头像">
            <h3></h3>
            <a href="#"></a>
            <div class="row">
                <span>文章</span>
                <span>粉丝</span>
            </div>
            <div class="row">
                <span id="articleNums">0</span>
                <span id="fanNums">0</span>
            </div>
        </div>
    </div>
    <div class="right">
        <!-- 选项卡按钮 -->
        <div class="tab-buttons">
            <button class="tab-btn active" data-tab="articles">文章</button>
            <button class="tab-btn" data-tab="profile">个人信息</button>
        </div>

        <!-- 文章内容区域 -->
        <div class="tab-content active" data-tab="articles">
            <div class="article-header">
                <h2>发布的文章</h2>
                <div class="header-divider"></div>
            </div>
            <div class="content">
<!--                <div class="blog">-->
<!--                    <div class="title">我的第一篇博客</div>-->
<!--                    <div class="date">2021-06-02</div>-->
<!--                    <div class="desc">今天开始, 好好学习Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas nesciunt, hic voluptatum, dolorem quisquam modi accusantium, commodi dolores architecto ratione vel exercitationem optio. Facere repellendus autem, obcaecati dolore sequi incidunt?</div>-->
<!--                    <a class="detail" href="blog_detail.html">查看全文&gt;&gt;</a>-->
<!--                </div>-->
            </div>
        </div>
        <!-- 个人信息区域 -->
        <div class="tab-content" data-tab="profile">
            <div class="article-header">
                <h2>个人信息</h2>
                <div class="header-divider"></div>
            </div>

            <div class="profile-info">
<!--                <button id="editProfileBtn" class="edit-btn">编辑信息</button>-->
                <div class="info-item">
                    <span class="info-label">用户名:</span>
                    <span class="info-value" id="username">加载中...</span>
                    <input type="text" class="edit-input" id="editUsername" style="display: none;">
                </div>
                <div class="info-item">
                    <span class="info-label">git地址:</span>
                    <span class="info-value" id="email">user@example.com</span>
                    <input type="email" class="edit-input" id="editEmail" style="display: none;">
                </div>
                <div class="info-item">
                    <span class="info-label">注册时间:</span>
                    <span class="info-value" id="register-date">2023-01-01</span>
                </div>
                <div class="info-item">
                    <span class="info-label">头像:</span>
                    <img src="" id="avatarPreview" class="avatar-preview" style="width: 75px" alt="头像预览">
                    <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
<!--                    当点击编辑按钮后才显示-->
                    <button id="changeAvatar" style="display: none" onclick="document.getElementById('avatarUpload').click()">更换头像</button>
                    <div class="upload-status" style="display:none;"></div>
                </div>
            </div>
<!--            只有是当前登录用户才能编辑自己的信息-->
            <button style="display: none" id="editProfileBtn" class="edit-btn">编辑信息</button>
        </div>
        <!-- 操作按钮 -->
        <div class="action-btns" style="display: none;">
            <button class="save-btn" onclick="saveChanges()">保存</button>
            <button class="cancel-btn" onclick="cancelEdit()">取消</button>
        </div>

    </div>
</div>
</body>


<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>

<script>
    // 选项卡切换逻辑
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            // 移除所有按钮激活状态
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            // 隐藏所有内容区域
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

            // 激活当前按钮
            this.classList.add('active');
            // 显示对应内容
            const tabName = this.dataset.tab;
            document.querySelector(`.tab-content[data-tab="${tabName}"]`).classList.add('active');
        });
    });

    // 获取URL中的用户ID
    function getUserIdFromUrl() {
        const params = new URLSearchParams(window.location.search);
        return params.get('userId');
    }
    
    // 加载用户数据
    const userId = getUserIdFromUrl();
    // 获取左侧卡片的用户信息
    let url = '/user/getUserInfo?userId=' + userId;
    getUserInfo(url)
    // 获取该用户的所有博客
    BlogsOfUser(userId)
    // 获取右侧区域的个人信息
    getPersonInformation(url)

    // 判断当前页面应属于当前登录用户的详情页还是其他用户的详情页
    if (userId == localStorage.getItem('loginUserId')) {
        // 如果是当前登录用户则显示编辑按钮
        $('#editProfileBtn').show()
    }

    
    function getPersonInformation(url) {
        $.ajax({
            type: 'get',
            url: url,
            success: function (ret) {
                if (ret != null && ret.code == 'SUCCESS' && ret.data != null) {
                    $("#username").text(ret.data.userName);
                    $("#email").text(ret.data.githubUrl);
                    $("#register-date").text(ret.data.createTime)
                    $('#avatarPreview').attr('src', ret.data.avatarPath)
                }
            }
        })
    }

    let originalData = {}; // 用于存储原始数据

    // 进入编辑模式
    function enableEdit() {
        // 保存原始数据
        originalData = {
            username: document.getElementById('username').textContent,
            email: document.getElementById('email').textContent
        };

        // 显示输入框
        document.querySelectorAll('.edit-input').forEach(input => {
            input.style.display = 'inline-block';
            input.value = originalData[input.id.replace('edit', '').toLowerCase()];
        });

        // 隐藏静态文本
        document.querySelectorAll('.info-value').forEach(span => {
            if(span.id !== 'register-date') {
                span.style.display = 'none';
            }
        });

        // 显示更改头像按钮
        document.querySelector('#changeAvatar').style.display = 'block';
        // 显示操作按钮
        document.querySelector('.action-btns').style.display = 'block';
        document.getElementById('editProfileBtn').style.display = 'none';
    }

    // 保存修改
    function saveChanges() {
        const newUsername = document.getElementById('editUsername').value;
        const newEmail = document.getElementById('editEmail').value;

        // 简单前端验证
        if(!newUsername || !newEmail) {
            alert('所有字段必须填写');
            return;
        }

        // 编辑用户个人信息
        $.ajax({
            url: '/user/update',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({
                id: localStorage.getItem('loginUserId'),
                userName: newUsername,
                githubUrl: newEmail
            }),
            success: function(ret) {
                if (ret.code == 'SUCCESS' && ret.data == true) {
                    // 更新前端显示
                    $('#username').text(newUsername);
                    $('#email').text(newEmail);
                    cancelEdit();
                    alert('修改保存成功');
                    // 立即刷新页面（true 表示强制从服务器加载）
                    location.reload(true);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', status, error);
                alert('保存失败，请检查网络!')
            }
        });
    }

    // 取消编辑
    function cancelEdit() {
        // 恢复原始数据
        document.getElementById('username').textContent = originalData.username;
        document.getElementById('email').textContent = originalData.email;

        // 隐藏输入框
        document.querySelectorAll('.edit-input').forEach(input => {
            input.style.display = 'none';
        });

        // 显示静态文本
        document.querySelectorAll('.info-value').forEach(span => {
            span.style.display = 'inline';
        });

        // 隐藏操作按钮
        document.querySelector('.action-btns').style.display = 'none';
        document.getElementById('editProfileBtn').style.display = 'inline-block';
        // 隐藏更改头像按钮
        document.querySelector('#changeAvatar').style.display = 'none';
    }

    // 绑定编辑按钮事件
    document.getElementById('editProfileBtn').addEventListener('click', enableEdit);


    // 头像上传功能
    // $('#changeAvatar').click(function() {
    //     $('#avatarUpload').click(); // 触发文件选择
    // });

    $('#avatarUpload').change(function(e) {
        const file = e.target.files[0];
        if (!file) return

        // 客户端验证
        if (!file.type.startsWith('image/')) {
            alert('请选择图片文件');
            return;
        }
        if (file.size > 2 * 1024 * 1024) { // 2MB限制
            alert('文件大小不能超过2MB');
            return;
        }
        // 显示预览
        const reader = new FileReader();
        reader.onload = function(e) {
            $('#avatarPreview').attr('src', e.target.result);
        };
        reader.readAsDataURL(file);

        // 执行上传
        uploadAvatar(file);
    });

    function uploadAvatar(file) {
        const formData = new FormData();
        formData.append('avatarPath', file);

        // 添加其他必要参数（如用户ID）
        const userId = localStorage.getItem('loginUserId'); // 假设有获取用户ID的方法
        formData.append('id', userId);

        // 显示上传状态
        $('.upload-status').show().text('上传中...');

        // 发给服务器进行修改头像
        $.ajax({
            url: '/user/uploadAvatar',
            type: 'post',
            data: formData,
            contentType: false, // 必须设置
            processData: false, // 必须设置
            success: function(ret) {
                if (ret.code == 'SUCCESS' && ret.data != null) {
                    // 更新头像显示
                    $('#avatarPreview').attr('src', ret.data.avatarPath + '?t=' + Date.now());
                    $('.upload-status').text('上传成功').delay(2000).fadeOut();
                } else {
                    showUploadError(ret.errMsg);
                }
            },
            error: function(xhr) {
                showUploadError(xhr.statusText || '网络错误');
            }
        });
    }
    function showUploadError(msg) {
        $('.upload-status').html(`上传失败: ${msg}`);
    }


</script>

</html>